<!-- **
    * @description Input 输入框组件
** -->
<!-- **
    * @use 无需引入直接使用 <yfn-input v-model="value" @input="dateInput" />
    * @params参数说明：
    * @params {v-model}                绑定值
    * @params {el}                     输入框元素，默认 a-input，可选值 a-input-search、a-input-password、a-input-number、a-input-tag、a-verification-code
    * @params {el-type}                同 el, [注：组件被引用时避免和其他组件内 el 定义产生冲突]
    * @params {allow-clear}            是否允许清除，默认 true
    * @params {disabled}               是否禁用，默认 false
    * @params {readonly}               是否为只读，默认 false
    * @params {max-length}             输入值最大长度
    * @params {placeholder}            提示文案
    * @params {show-suffix}            是否显示默认后缀元素, 默认 false
    * @params {...}                    继承 el 原生属性/事件
** -->
<!-- **
    * @events事件：
    * @change                          值改变时触发
    * @input                           输入时触发
    * @search                          点击搜索icon时触发
    * @get-instance                    获取实例
    * @{...}                           继承 el 原生事件
** -->
<!-- **
    * @slots插槽：
    * @suffix                          后缀元素
    * @prefix                          前缀元素
    * @append                          后置标签
    * @prepend                         前置标签
    * @{...}                           继承 el 原生插槽
** -->
<template>
  <compo-com class="YfnInput" ref="YfnInput" v-if="biz.visible">
    <!-- 默认后缀业务 -->
    <template #default-suffix>
      <a-popover position="br" trigger="click" v-model:popup-visible="biz.popover">
        <icon-more-vertical style="cursor: pointer; margin-left: 5px" @click="handleMore" />
        <template #content>
          <a-textarea placeholder="请输入，一行一个" v-model="biz.value" :style="{ width: '200px', height: '200px' }" />
          <div class="YfnInput-set">
            <div class="YfnInput-set-item">
              <a-button class="gray-outline" size="mini" @click="handleClear">清空</a-button>
            </div>
            <div class="YfnInput-set-item">
              <a-button size="mini" class="gray-outline" @click="handleCancel">取消</a-button>
              <a-button type="outline" size="mini" @click="handleSubmit">搜索</a-button>
            </div>
          </div>
        </template>
      </a-popover>
    </template>
  </compo-com>
</template>
<script lang="ts" setup>
  import { reactive, defineProps, useAttrs, useSlots, h, defineAsyncComponent, getCurrentInstance } from 'vue'

  /* props */
  const props = defineProps({
    el: String,
    elType: String,
    showSuffix: Boolean,
  })
  /* proxy */
  const { proxy } = getCurrentInstance() as any
  // emit
  const emit = defineEmits(['search', 'change', 'get-instance'])
  /* attrs */
  const attrs = useAttrs()
  /* slots */
  const slots = useSlots()
  /* data */
  const options = reactive({
    ...props,
    ...attrs,
  })
  const biz: any = reactive({
    module: {},
    visible: false,
    popover: false,
    value: '',
  })
  /* fn */
  const getFile = () => {
    import(`@arco-design/web-vue/es`).then((res) => {
      biz.module = res
      biz.visible = true
      setInstance()
    })
  }
  const getKey = (key: any) => {
    const keyAttr = key.includes('a-') ? key.split('a-')[1] : ''
    const keyArr = keyAttr.split('-')
    let keyR = ''
    keyArr.forEach((p: any) => {
      const str = `${p.charAt(0).toUpperCase()}${p.slice(1)}`
      keyR += str
    })
    return keyR
  }
  getFile()
  // 实例
  const setInstance = () => {
    emit('get-instance', proxy)
  }
  // 内置功能操作
  const updateValue = (v: any) => {
    attrs['onUpdate:modelValue'](v)
  }
  const handleMore = () => {
    biz.value = attrs.modelValue
  }
  const handleClear = () => {
    biz.value = ''
  }
  const handleCancel = () => {
    biz.popover = false
  }
  const handleSubmit = () => {
    biz.popover = false
    const value: any = biz.value ? biz.value.split('\n').join(',') : ''
    updateValue(value)
    emit('change', value)
    emit('search', value)
  }
  /* render */
  const CompoCom = defineAsyncComponent(() => {
    return new Promise((resolve) => {
      const createEl: any = renderFn()
      resolve(createEl)
    })
  })
  const renderFn = () => {
    return {
      props: {},
      render(): any {
        const createNode = () => {
          // 元素
          const elKey = getKey(options.elType || options.el || 'a-input')
          const el = biz.module[elKey]
          // 属性
          let defaultProps = {
            'allow-clear': true,
          }
          const attrs: any = {
            ...defaultProps,
            ...options,
            onSearch: (e: any) => emit('search', e),
          }
          // 子元素
          let childNodes: any = null
          // 插槽
          const defaultSlot = this.$slots
          childNodes = slots
          const showSuffix = options.showSuffix && !childNodes.suffix
          if (showSuffix) {
            childNodes['suffix'] = defaultSlot['default-suffix']
          }
          return h(el, attrs, childNodes)
        }
        return createNode()
      },
    }
  }
</script>
<style scoped lang="less">
  .YfnInput-set {
    display: flex;
    align-items: center;
    justify-content: space-between;
    :deep(.arco-btn) {
      &:not(:last-child) {
        margin-right: 5px;
      }
    }
  }
</style>
